
<template>
	<div class="gongyingshangshangpin">
    <left></left>
    <div class="right">
      <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>供应商商品</el-breadcrumb-item>
        </el-breadcrumb>
        <top></top>
      </div>
      <div style=" padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
        <!-- 1 -->
        <div style="padding: 0px 0 19px 0; font-size: 18px; font-weight: 700;" class="flex">
          <div><img src="../../../static/img/gongying4.png" style="width: 22px; margin-right: 10px;"></div>
          <div>供应商产品</div>
        </div>
        <div class="flex">
           <div style="width: 220px; height: 120px;background: rgb(255, 255, 255); border-radius: 20px; margin-right: 20px; padding-left: 20px;" class="flexc">
             <div class="flexbc">
               <div><img src="../../../static/img/gongying2.png" style="width: 60px; height: 60px; border-radius: 30px; margin-right: 12px;"></div>
               <div>
                 <div style="color: rgb(2, 12, 29); font-size: 28px; font-weight: bold; margin-bottom: 5px;">{{total}}</div>
                 <div style="color: rgb(120, 125, 133); font-size: 14px;">商品总数</div>
               </div>
             </div>
           </div>
           <div style="width: 220px; height: 120px;background: rgb(255, 255, 255); border-radius: 20px;  padding-left: 20px; " class="flexc">
             <div class="flexbc">
               <div><img src="../../../static/img/gongying3.png" style="width: 60px; height: 60px; border-radius: 30px; margin-right: 12px;"></div>
               <div>
                 <div style="color: rgb(2, 12, 29); font-size: 28px; font-weight: bold; margin-bottom: 5px;">{{total2}}</div>
                 <div style="color: rgb(120, 125, 133); font-size: 14px;">已上架商品数</div>
               </div>
             </div>
           </div>
        </div>
        <!-- 3 -->
        <div style="padding: 38px 0 19px 0; font-size: 18px; font-weight: 700;" class="flex">
          <div><img src="../../../static/img/gongyingshang1.png" style="width: 22px; margin-right: 10px;"></div>
          <div>供应商检索</div>
        </div>
        <!-- 4 -->
        <div style="height: 112px; background: rgb(255, 255, 255); border-radius: 20px; padding: 20px;" class="flexb">

            <div class="flex">
              <div>
                <div style="margin-bottom: 10px;">商品名称</div>
                <div><el-input v-model="search.title" style="width: 200px; margin-right: 30px;" placeholder="请输入"></el-input></div>
              </div>
              <div>
                <div style="margin-bottom: 10px;">佣金区间</div>
                <div class="flexc">
                  <div><el-input v-model="search.commission_start" style="width: 120px; margin-right: 10px;" placeholder="请输入"></el-input></div>
                  <div style="color: color: rgb(175, 179, 188);">~</div>
                  <div><el-input v-model="search.commission_end" style="width: 120px; margin-left: 10px; margin-right: 30px;" placeholder="请输入"></el-input></div>
                </div>
              </div>
              <div>
                <div style="margin-bottom: 10px;">卖点</div>
                <div><el-input v-model="search.sell_point" style="width: 200px; margin-right: 30px;" placeholder="请输入"></el-input></div>
              </div>

              <div style="margin-right: 30px;">
                <div style="margin-bottom: 10px;">&nbsp;</div>
                <div><el-button type="primary" round icon="el-icon-search" @click="sousuo">检索</el-button></div>
              </div>
              <div v-if="search.order == 1">
                <div style="margin-bottom: 10px;">&nbsp;</div>
                <div class="flexc" style="line-height: 41px; color: rgb(175, 179, 188); font-size: 12px; cursor: pointer;">正序排列 <i class="el-icon-sort" style="margin-left: 10px;" @click="changorder(0)"></i></div>
              </div>
              <div v-if="search.order == 0 || search.order == ''">
                <div style="margin-bottom: 10px;">&nbsp;</div>
                <div class="flexc" style="line-height: 41px; color: rgb(175, 179, 188); font-size: 12px; cursor: pointer;">倒序排列 <i class="el-icon-sort" style="margin-left: 10px;" @click="changorder(1)"></i></div>
              </div>
            </div>
            <!-- <div style="margin-right: 30px;">
              <div style="margin-bottom: 10px;">自动上架</div>
              <div><el-switch v-model="zidong" style="width: 85px; height: 41px;" active-color="rgb(0, 90, 255);" inactive-color="rgb(246, 248, 251);"></el-switch></div>
            </div> -->

        </div>
        <!-- 5 -->
        <div class="flex" style="margin-top: 20px; " v-loading="loading"  element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
          <!-- :class="((index+1)%3 == 0 && widthss)?'shi3':'bushi3'" -->
          <div  style="width: 500px; height: 230px; padding: 20px; margin-bottom: 20px; background: rgb(255, 255, 255); border-radius: 20px; margin-right: 15px;" v-for="(item,index) in list" :key="item.id">
            <div class="flexbc">
              <div class="flex">
                <div style="color: rgb(2, 12, 29); font-size: 12px; margin-right: 20px;">供应商:{{item.supplier_name}}</div>
                <div style="color: rgb(212, 215, 222); font-size: 12px;">发布时间: {{item.created_at}}</div>
              </div>
              <div class="flex">
                <div style="background: rgb(254, 61, 61); border-radius: 4px; width: 34px; height: 20px; color: rgb(255, 255, 255); font-size: 12px;" class="flexcc" v-if="item.is_main == 1">主推</div>
                <div style="background: rgb(0, 90, 255); border-radius: 4px; width: 34px; height: 20px; color: rgb(255, 255, 255); font-size: 12px; margin-left: 10px;" class="flexcc" v-if="item.is_top">置顶</div>
              </div>
            </div>
            <div class="flex" style="margin-top: 20px;">
              <div><img :src="item.image1 || 'https://91haoka.cn/gth/static/img/kenan.jpg'" style="width: 100px; height: 100px; border-radius: 10px;"></div>
              <div style="margin-left: 20px; width: 330px;">
                <div style="color: rgb(2, 12, 29); font-size: 16px; font-weight: bold; line-height: 19px; margin-bottom: 10px;">{{item.title}}</div>
                <div style="color: rgb(254, 61, 61); font-size: 12px; margin-bottom: 10px;">{{item.points}}</div>
                <div class="flex">
                  <div style="color: rgb(254, 61, 61); background: rgb(255, 242, 242);" class="flexcc xt" v-if="item.selling_point.length > 0 && item.selling_point[0]">{{item.selling_point[0]}}</div>
                  <div style="color: rgb(31, 159, 48); background: rgb(229, 255, 217);" class="flexcc xt" v-if="item.selling_point.length > 1 && item.selling_point[1]">{{item.selling_point[1]}}</div>
                  <div style="color: rgb(189, 55, 255); background: rgb(251, 239, 255);" class="flexcc xt" v-if="item.selling_point.length > 2 && item.selling_point[2]">{{item.selling_point[2]}}</div>
                  <div style="color: rgb(55, 175, 255); background: rgb(239, 250, 255);" class="flexcc xt" v-if="item.selling_point.length > 3 && item.selling_point[3]">{{item.selling_point[3]}}</div>
                </div>
              </div>
            </div>
            <div style="margin: 20px 0 0 0; font-size: 12px; color: rgb(120, 125, 133);" class="flexbc">
              <div style="width: 300px;">
                <el-tooltip class="item" effect="dark" placement="top">
                      <div slot="content">
                        <span>佣金规则：{{item.p_rules}} </span>
                        <span v-if="item.p_active_commission != 0 && item.p_active_commission != null">已激活，佣金{{item.p_active_commission}}元.</span>
                        <span v-if="item.p_first_recharge_one_commission != 0 && item.p_first_recharge_one_commission != null">首充大于{{item.p_first_recharge_one}}元，佣金<span style="color: #f00;">{{item.p_first_recharge_one_commission}}</span>元</span>
                        <span v-if="item.p_first_recharge_two_commission != 0 && item.p_first_recharge_two_commission != null">或者首充大于{{item.p_first_recharge_two}}元，佣金<span style="color: #f00;">{{item.p_first_recharge_two_commission}}</span>元.</span>
                        <span v-if="item.p_recharge_amount_one_commission != 0 && item.p_recharge_amount_one_commission != null">累计充值大于{{item.p_recharge_amount_one}}元，佣金<span style="color: #f00;">{{item.p_recharge_amount_one_commission}}</span>元</span>
                        <span v-if="item.p_recharge_amount_two_commission != 0 && item.p_recharge_amount_two_commission != null">且累计充值大于{{item.p_recharge_amount_two}}元，佣金<span style="color: #f00;">{{item.p_recharge_amount_two_commission}}</span>元.</span>
                      </div>
                      <div style="margin-bottom: 10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
                        <span>佣金规则：{{item.p_rules}} </span>
                        <span v-if="item.p_active_commission != 0 && item.p_active_commission != null">已激活，佣金{{item.p_active_commission}}元.</span>
                        <span v-if="item.p_first_recharge_one_commission != 0 && item.p_first_recharge_one_commission != null">首充大于{{item.p_first_recharge_one}}元，佣金<span style="color: #f00;">{{item.p_first_recharge_one_commission}}</span>元</span>
                        <span v-if="item.p_first_recharge_two_commission != 0 && item.p_first_recharge_two_commission != null">或者首充大于{{item.p_first_recharge_two}}元，佣金<span style="color: #f00;">{{item.p_first_recharge_two_commission}}</span>元.</span>
                        <span v-if="item.p_recharge_amount_one_commission != 0 && item.p_recharge_amount_one_commission != null">累计充值大于{{item.p_recharge_amount_one}}元，佣金<span style="color: #f00;">{{item.p_recharge_amount_one_commission}}</span>元</span>
                        <span v-if="item.p_recharge_amount_two_commission != 0 && item.p_recharge_amount_two_commission != null">且累计充值大于{{item.p_recharge_amount_two}}元，佣金<span style="color: #f00;">{{item.p_recharge_amount_two_commission}}</span>元.</span>
                      </div>
                </el-tooltip>
                <!-- <el-tooltip class="item" effect="dark" placement="top">
                      <div slot="content">
                        <span>我给下游的佣金规则：{{item.c_rules}} </span>
                        <span v-if="item.c_active_commission != 0">已激活，佣金{{item.c_active_commission}}元.</span>
                        <span v-if="item.c_first_recharge_one_commission != 0">首充大于{{item.c_first_recharge_one}}元，佣金<span style="color: #f00;">{{item.c_first_recharge_one_commission}}</span>元</span>
                        <span v-if="item.c_first_recharge_two_commission != 0">或者首充大于{{item.c_first_recharge_two}}元，佣金<span style="color: #f00;">{{item.c_first_recharge_two_commission}}</span>元.</span>
                        <span v-if="item.c_recharge_amount_one_commission != 0">累计充值大于{{item.c_recharge_amount_one}}元，佣金<span style="color: #f00;">{{item.c_recharge_amount_one_commission}}</span>元</span>
                        <span v-if="item.c_recharge_amount_two_commission != 0">且累计充值大于{{item.c_recharge_amount_two}}元，佣金<span style="color: #f00;">{{item.c_recharge_amount_two_commission}}</span>元.</span>
                      </div>
                      <div style="margin-bottom: 10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
                        <span>我给下游的佣金规则：{{item.c_rules}} </span>
                        <span v-if="item.c_active_commission != 0">已激活，佣金{{item.c_active_commission}}元.</span>
                        <span v-if="item.c_first_recharge_one_commission != 0">首充大于{{item.c_first_recharge_one}}元，佣金<span style="color: #f00;">{{item.c_first_recharge_one_commission}}</span>元</span>
                        <span v-if="item.c_first_recharge_two_commission != 0">或者首充大于{{item.c_first_recharge_two}}元，佣金<span style="color: #f00;">{{item.c_first_recharge_two_commission}}</span>元.</span>
                        <span v-if="item.c_recharge_amount_one_commission != 0">累计充值大于{{item.c_recharge_amount_one}}元，佣金<span style="color: #f00;">{{item.c_recharge_amount_one_commission}}</span>元</span>
                        <span v-if="item.c_recharge_amount_two_commission != 0">且累计充值大于{{item.c_recharge_amount_two}}元，佣金<span style="color: #f00;">{{item.c_recharge_amount_two_commission}}</span>元.</span>
                      </div>
                </el-tooltip> -->
              </div>
              <div @click="shangjia(item,100)" v-if="item.status == 0" style="background: rgb(228, 237, 255); cursor: pointer; border-radius: 16px;width: 100px; height: 32px; font-size: 14px; color: rgb(0, 90, 255);" class="flexcc">
                上架
              </div>
              <div @click="shangjia(item,0)" v-if="item.status == 100" style="background: rgb(228, 237, 255); cursor: pointer; border-radius: 16px;width: 100px; height: 32px; font-size: 14px; color: rgb(0, 90, 255);" class="flexcc">
                下架
              </div>

            </div>

          </div>
        </div>
        <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total,jumper" :current-page="search.page"
         @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
		 <!-- <footers></footers> -->
      </div>



    </div>
    <el-dialog title="推广二维码" :visible.sync="erweima_log" width="440px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="qrcode" ref="qrCodeUrl" style="margin: 0 auto;"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="erweima_log = false">关闭</el-button>
        <el-button type="primary" @click="xiazai">下载</el-button>
      </span>
    </el-dialog>
    <el-dialog title="设置排序" :visible.sync="paixu_log" width="440px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div><el-input v-model="dangqianshangpin.order" style="width: 360px;"></el-input></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="paixu_log = false">关闭</el-button>
        <el-button type="primary" @click="xiugai">确定</el-button>
      </span>
    </el-dialog>
	</div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
	export default {
		name: 'gongyingshangshangpin',
    components:{
      left,top,footers
    },
		data() {
			return {
        all:{},
        search:{
          page:1,
          page_size:20,
          status:"",
          title:"",
          selling_point:"",
          order:""
        },
        list:[],
        total:0,
        total2:0,
        dangqianshangpin:"",
        erweima_log:false,
        loading:true,
        paixu_log:false,

        widthss:false
			}
		},
		created() {
      this.getlist()
      this.getlist2()


		},
		mounted() {
      console.log(window.screen.width)
      if(window.screen.width == 1920){
        this.widthss = true
      }
      //临时写在这里
      axios.get('/agent/auth/user').then((response)=>{
      	if (response.data.msg.code == 0) {
          localStorage.setItem('user',JSON.stringify(response.data.data))
      	} else {
      		this.$message.error(response.data.msg.info);
      	}
      })
		},
		methods: {

      shangjia:function(item,val){
        this.dangqianshangpin = item
        this.dangqianshangpin.status = val
        this.xiugai()
      },
      xiazai:function(){
        let img = document.getElementsByClassName('qrcode')[0].childNodes[1]
        var a = document.createElement('a');
                 a.download = 'erweima';//这边是文件名，可以自定义
                 a.href = img.src;
                 document.body.appendChild(a);
                 a.click();
                 document.body.removeChild(a);
      },
      creatQrCode(url) {
        this.erweima_log = true
        this.$nextTick(()=>{
          this.$refs.qrCodeUrl.innerHTML = '';
          let url = url
          var qrcode = new QRCode(this.$refs.qrCodeUrl, {
              text: url, // 需要转换为二维码的内容
              width: 400,
              height: 400,
              colorDark: '#000000',
              colorLight: '#ffffff',
              correctLevel: QRCode.CorrectLevel.H
          })
        })
      },
      sousuo:function(){
        this.search.page = 1
        this.getlist()
      },
      getlist:function(){
        axios.get('/agent/page/list',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.list = response.data.data.data
            this.list.forEach(item=>{
              item.selling_point = JSON.parse(item.selling_point)
              console.log(item.selling_point)
            })
            this.total = response.data.data.total
            this.loading = false
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      getlist2:function(){
        axios.get('/agent/page/list',{params:{status:100}}).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.total2 = response.data.data.total
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      changestatus:function(item){
        this.search.status = item
        this.sousuo()
      },
      changorder:function(item){
        this.search.order = item
        this.sousuo()
      },
      fanye:function(val){
        this.search.page = val
        this.getlist()
      },
      xuanzhong:function(item){
        this.dangqianshangpin = item
      },

      xiugai:function(){
        let all = JSON.parse(JSON.stringify(this.dangqianshangpin))
        all.selling_point = JSON.stringify(all.selling_point)
        axios.post('/agent/page/update',all).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.$message.success('设置成功');
            this.getlist()
            this.paixu_log = false
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },

      handleCommand:function(e){
        console.log(e)
        if(e == 'a'){
          this.$router.push('/shangpinguanli/gongyingshangshangpin/bianjishangpin?id='+this.dangqianshangpin.id)
        }
        if(e == 'b'){
          this.dangqianshangpin.is_top = moment().unix()
          this.xiugai()
        }
        if(e == 'bb'){
          this.dangqianshangpin.is_top = 0
          this.xiugai()
        }
        if(e == 'c'){
          this.dangqianshangpin.is_main = 1
          this.xiugai()
        }
        if(e == 'cc'){
          this.dangqianshangpin.is_main = 0
          this.xiugai()
        }
        if(e == 'd'){
          this.paixu_log = true
        }
        if(e == 'e'){
          this.dangqianshangpin.status = 0
          this.xiugai()
        }
      }
		}
	}
</script>


<style scoped lang="less">
  .gongyingshangshangpin{
    .sxjact{background: rgb(0, 90, 255); border-radius:30px; font-size: 24px; text-align: center; font-weight: 500; color: rgb(255, 255, 255); width: 150px; height: 60px; margin-right: 30px; }
    .sxj{background: rgb(227, 232, 241); border-radius:30px; font-size: 24px; text-align: center; font-weight: 500; color: rgb(175, 179, 188); width: 150px; height: 60px; margin-right: 30px; }
    .xt{ margin-right: 10px; border-radius: 5px; font-size: 12px; padding: 5px 10px;}
    .lj{width: 100px; height: 32px; color: rgb(64, 66, 71); background: rgb(227, 232, 241); border-radius: 16px; margin-right: 20px; font-size: 14px; cursor: pointer;}
    .ljact{width: 100px; height: 32px; color: rgb(0, 90, 255); background: rgb(228, 237, 255); border-radius: 16px; margin-right: 20px; font-size: 14px; cursor: pointer;}
    .bushi3{ margin-right: 20px;}

  }

</style>
